<template>
  <div ref="banner" class="home-banner swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in banner" :key="index">
        <img width="100%" height="600" :src="item.path" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/swiper.min.css";
export default {
  name: "Banner",
  props: {
    banner: Array,
  },
  data() {
    return {
      swiper1: null,
    };
  },
  watch: {
    banner() {
      this.$nextTick(() => {
        this.swiper1 && this.swiper1.update();
      });
    },
  },
  mounted() {
    this.swiper1 = new Swiper(this.$refs.banner);
    window.aaa = this.swiper1;
  },
};
</script>

<style lang="scss" scoped>
.home-banner {
  background: #333;
  font-size: 0;
  min-height: 500px;
  .swiper-slide {
    width: 100vw;
  }
}
</style>
